<script setup>
    import { ref } from 'vue';
   const active = ref(0);
const az=ref(["*","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T",'U',"V","W","X","Y","Z"])
   
</script>
<template>
    <van-nav-bar title="通讯录">
  <template #right>
    <van-icon name="search" size="22" />
    <van-icon name="add-o" size="22" />
  </template>
</van-nav-bar>
<van-index-bar :index-list="az">
 
<template  v-for="item in az">
  
  <van-index-anchor :index="item" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  </template>
</van-index-bar>

<van-tabbar v-model="active" active-color="rgb(7,193,96)">
  <van-tabbar-item icon="chat">微信</van-tabbar-item>
  <van-tabbar-item icon="manager">通讯录</van-tabbar-item>
  <van-tabbar-item icon="wechat-moments">发现</van-tabbar-item>
  <van-tabbar-item icon="contact">我</van-tabbar-item>
</van-tabbar>
</template>
<style scoped>
i{
  padding: 5px;
}

</style>
